<template>
  <div class="content">
    <div  style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
          :append-to-body="true"
    >
      <div class="cover">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title" v-if="type==2">{{name}}</div>
<!--            <div class="title" v-if="type==3">{{name}}</div>-->
<!--            <div class="title" v-if="type==4">{{name}}</div>-->
<!--            <div class="title" v-if="type==5">{{name}}</div>-->
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
<!--        <div class="cover-middle">-->
<!--          <div class="street">街道/乡镇：-->
<!--            <el-select v-model="streetId" placeholder="请选择" @change="changeStreet">-->
<!--              <el-option-->
<!--                  v-for="item in streetList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--          <div class="village">村/社区：-->
<!--            <el-select v-model="communityId" placeholder="请选择" @change="changeCommunity">-->
<!--              <el-option-->
<!--                  v-for="item in communityList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.name"-->
<!--                  :value="item.id" >-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </div>-->
<!--        </div>-->
        <template v-if="type==2">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="id"
                  label="序号"
                  width="100"
              >
              </el-table-column>
              <el-table-column
                  prop="realName"
                  width="160"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column prop="sex" width="100" label="性别">
                <template slot-scope="scope">
                  <span v-if="scope.row.sex==1" style="color: #fff">男</span>
                  <span v-if="scope.row.sex==2" style="color: #fff">女</span>
                </template>
              </el-table-column>
              <el-table-column  prop="mobile"  label="联系电话"></el-table-column>

              <el-table-column
                  prop="birthday"
                  label="出生日期"
              >
              </el-table-column>
<!--              <el-table-column-->
<!--                  prop="eml"-->
<!--                  label="身份证号"-->
<!--              >-->
<!--              </el-table-column>-->

            </el-table>
          </div>
        </template>
        <template v-if="type==3">
          <div class="cover-bottom">
            <el-table
                :data="tableData"
                style="width: 100%;">
              <el-table-column
                  prop="id"
                  label="序号"
              >
              </el-table-column>
              <el-table-column
                  prop="userName"
                  label="姓名"
              >
              </el-table-column>
              <el-table-column  prop="mobile"  label="联系电话">
              </el-table-column>
              <el-table-column  prop="crtTime"  label="访问时间">
              </el-table-column>
            </el-table>
          </div>
        </template>
        <div class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getStreetDatatApi,
  getVillageListtApi,
} from "@/api/statistics-1";
import {
  aksAllPostListApi, aksBrowseNumberApi, aksCustomerApi,
  allPostListApi,
  dhAllPostListApi, dhBrowseNumberApi, dhCustomerApi,
  gzAllPostListApi, gzBrowseNumberApi, gzCustomerApi,
  jtAllPostListApi, jtBrowseNumberApi, jtCustomerApi,
  sbAllPostListApi, sbBrowseNumberApi, sbCustomerApi,
 szhBrowseNumberApi, szhCustomerApi, ymAllPostListApi, ymBrowseNumberApi, ymCustomerApi,

} from "@/api/statistics-3";

export default {
  name: "Cover4",
  props:['id','closeDialog','type','name'],
  data() {
    return{
      count: 2,
      page: 1,
      limit: 8,
      isShow: true,
      streetId: '',
      communityId:'',
      streetList:[],
      communityList: [],
      tableData: []
    }
  },
  methods:{
    onCloseDialog(item)
    {
      this.closeDialog(0)
    },
    close(){
      this.isShow=false
    },
    changeStreet(){
      this.getList()
    },
    changeCommunity(){
      this.getList()
    },
    getStreetList(){
      getStreetDatatApi({}).then((res)=>{
        if(res.code===200){
          this.streetList = res.data
        }
      })
    },
    getVillageList(){
      getVillageListtApi({}).then((res)=>{
        if(res.code===200){
          this.communityList = res.data
        }
      })
    },
    getList(){

      //总注册人数
      if(this.id==1&&this.type==2){
        szhCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==2&&this.type==2){
        jtCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==3&&this.type==2){
        gzCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==4&&this.type==2){
        ymCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==5&&this.type==2){
        dhCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==6&&this.type==2){
        sbCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
          }
        })
      }
      if(this.id==7&&this.type==2){
        aksCustomerApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count

          }
        })
      }
      //总访问人数
      if(this.id==1&&this.type==3){
        szhBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==2&&this.type==3){
        jtBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==3&&this.type==3){
        gzBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==4&&this.type==3){
        ymBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==5&&this.type==3){
        dhBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==6&&this.type==3){
        sbBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      if(this.id==7&&this.type==3){
        aksBrowseNumberApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data
            this.count=res.data.total
          }
        })
      }
      //全部岗位列表
      if(this.id==1&&this.type==5){
        allPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      if(this.id==2&&this.type==5){
        jtAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total

          }
        })
      }
      if(this.id==3&&this.type==5){
        gzAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      if(this.id==4&&this.type==5){
        ymAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      if(this.id==5&&this.type==5){
        dhAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      if(this.id==6&&this.type==5){
        sbAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      if(this.id==7&&this.type==5){
        aksAllPostListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.records
            this.count=res.data.total
          }
        })
      }
      //简历投递人列表
      // if(this.id==1&&this.type==6){
      //   resumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
      // if(this.id==2&&this.type==6){
      //   jtResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
      // if(this.id==3&&this.type==6){
      //   dhResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
      // if(this.id==4&&this.type==6){
      //   gzResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
      // if(this.id==5&&this.type==6){
      //   ymResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.countl
      //     }
      //   })
      // }
      // if(this.id==6&&this.type==6){
      //   sbResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
      // if(this.id==7&&this.type==6){
      //   aksResumeListApi({page:this.page,limit:this.limit,communityId:this.communityId,streetId:this.streetId}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //     }
      //   })
      // }
    },
    handleSizeChange(e) {
      this.limit = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList()
    },
  },
  mounted() {
    this.fairActive = this.id
    this.getList()
    this.getStreetList()
    this.getVillageList()
  },
}
</script>

<style lang="scss" scoped>
.content{
  .cover{
    position: relative;
    width: 52%;
    height: auto;
    min-height: 60vh;
    background-color: #0A1456;
    border-radius: 15px;
    padding: 20px;
    .cover-top{
      display: flex;
      justify-content: space-between;
      .top-left{
        display: flex;
        .sign{
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }
        .title{
          color: #ffffff;
        }
      }
      .top-right{
        color: #2FA1F9;
        font-size: 20px;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .cover-middle{
      display: flex;
      margin: 20px 0;
      .street{
        color: #ffffff;
        margin-right: 20px;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
      .village{
        color: #ffffff;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
    }
    .cover-bottom{
      width: 100%;
      height: calc(100% - 127px);
      overflow: hidden;
      ::v-deep{
        .el-table th.el-table__cell{
          background-color: rgba(72, 75, 147, 0.5);
          text-align: center;
          color: #fff;
        }
        .el-table tr{
          background-color: #0A1456;
        }
        .el-table .el-table__cell{
          background-color: #0A1456;
          border-bottom: 1px solid #394276;
          text-align: center;
        }
        .el-table .cell{
          color: #fff;
        }
      }
    }
    .paging{
      display: flex;
      justify-content: center;
      margin-top: 10px;
      ::v-deep{
        .el-pagination.is-background .btn-prev{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-prev span{
          color: #fff;
        }
        .el-pagination.is-background .btn-next{
          background-color: rgba(72, 75, 147, 0.5);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-next span{
          color: #fff;
        }
      }
    }
  }
}
</style>
